<template>
   <view class="uv-page">
      <view class="uv-page__top-box">
         <text class="uv-demo-block__title">演示效果</text>
      </view>
      <uv-empty :mode="mode" :icon="imgList[mode]">
         <uv-button
            size="small"
            type="primary"
            :style="{ marginTop: 10 + 'px' }"
            v-if="mode == 'car'"
            text="查看更多商品"
         >
         </uv-button>
      </uv-empty>
      <div class="empty-select">
         <uv-cell
            :titleStyle="{ fontWeight: 500 }"
            @click="openImg(item.imgName as Mode)"
            :title="item.title"
            v-for="(item, index) in list"
            :key="index"
            isLink
         >
            <template v-slot:icon>
               <image class="uv-cell-icon" :src="item.iconUrl" mode="widthFix"></image>
            </template>
         </uv-cell>
      </div>
   </view>
</template>

<script lang="ts" setup>
import { ref } from 'vue';

// 类型定义
interface EmptyListItem {
   imgName: string;
   title: string;
   iconUrl: string;
}

type Mode =
   | 'car'
   | 'page'
   | 'search'
   | 'address'
   | 'wifi-off'
   | 'order'
   | 'coupon'
   | 'favor'
   | 'permission'
   | 'history'
   | 'news'
   | 'message'
   | 'list'
   | 'data'
   | 'comment';

// 响应式数据
const mode = ref<Mode>('car');

// 如果使用这些图片，请勿直接引入cdn.uviewui.com的资源，因为此资源路径随时会有变动
// 变动后，您将会访问图片失败，如有需要，您可以将这些图片上传到自己的oss或者服务器再使用
const baseUrl = 'https://cdn.cuui.cn/common/empty/';

const imgList = ref<Record<string, string>>({
   car: `${baseUrl}car.png`,
   address: `${baseUrl}address.png`,
   comment: `${baseUrl}comment.png`,
   coupon: `${baseUrl}coupon.png`,
   data: `${baseUrl}data.png`,
   history: `${baseUrl}history.png`,
   list: `${baseUrl}list.png`,
   message: `${baseUrl}message.png`,
   news: `${baseUrl}news.png`,
   order: `${baseUrl}order.png`,
   page: `${baseUrl}page.png`,
   permission: `${baseUrl}permission.png`,
   search: `${baseUrl}search.png`,
   'wifi-off': `${baseUrl}wifi-off.png`,
});

const list = ref<EmptyListItem[]>([
   {
      imgName: 'car',
      title: '购物车为空(同时传入slot)',
      iconUrl: 'https://cdn.uviewui.com/uview/demo/empty/car.png',
   },
   {
      imgName: 'data',
      title: '数据为空',
      iconUrl: 'https://cdn.uviewui.com/uview/demo/empty/data.png',
   },
   {
      imgName: 'message',
      title: '评论为空',
      iconUrl: 'https://cdn.uviewui.com/uview/demo/empty/comment.png',
   },
   {
      imgName: 'coupon',
      title: '没有优惠券',
      iconUrl: 'https://cdn.uviewui.com/uview/demo/empty/coupon.png',
   },
   {
      imgName: 'history',
      title: '无历史记录',
      iconUrl: 'https://cdn.uviewui.com/uview/demo/empty/history.png',
   },
   {
      imgName: 'list',
      title: '列表为空',
      iconUrl: 'https://cdn.uviewui.com/uview/demo/empty/list.png',
   },
   {
      imgName: 'message',
      title: '消息列表为空',
      iconUrl: 'https://cdn.uviewui.com/uview/demo/empty/message.png',
   },
   {
      imgName: 'news',
      title: '无新闻列表',
      iconUrl: 'https://cdn.uviewui.com/uview/demo/empty/news.png',
   },
   {
      imgName: 'order',
      title: '订单为空',
      iconUrl: 'https://cdn.uviewui.com/uview/demo/empty/order.png',
   },
   {
      imgName: 'page',
      title: '页面不存在',
      iconUrl: 'https://cdn.uviewui.com/uview/demo/empty/page.png',
   },
   {
      imgName: 'permission',
      title: '无权限',
      iconUrl: 'https://cdn.uviewui.com/uview/demo/empty/permission.png',
   },
   {
      imgName: 'search',
      title: '没有搜索结果',
      iconUrl: 'https://cdn.uviewui.com/uview/demo/empty/search.png',
   },
   {
      imgName: 'wifi-off',
      title: '没有WiFi',
      iconUrl: 'https://cdn.uviewui.com/uview/demo/empty/wifi.png',
   },
]);

// 方法
// 点击改变图片
const openImg = (imgName: Mode) => {
   mode.value = imgName;
};
</script>

<style lang="scss" scoped>
.uv-page {
   padding: 40rpx 0px;

   &__top-box {
      padding-left: 40rpx;
   }
}

.empty-select {
   margin-top: 10px;
}
</style>
